<template>

<el-dialog
        :model-value="dialogVisible"
        width="70%"
        class="record__right__dialog"
        :align-center="true"
        @close="cancel"
        :destroy-on-close="true"
        :show-close="false"
    >
    <!-- <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template> -->

    <div class="page__all">
        <!-- <img :src="data_obj.image" alt="" height="500px"> -->

        <div class="page__left">
            <div class="title">生成结果：</div>

            <div class="generate__result">
                <div v-for="item, index in data_obj.result_list" :key="index" class="result__data">
                    <div v-if="item.file_type=='png'" class="image__box result__box">
                        <el-image
                        style="width: 100%; height: 100%; object-fit: contain;"
                        :src="item.path_url"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[item.path_url]"
                        fit="contain"
                        :initial-index="4"
                        />
                        <div class="result__utils">
                            <span class="download__img" @click="share_result(item)">分享</span>
                            <span class="download__img" @click="download__img(item.path_url)">下载</span>
                        </div>
                        
                    </div>

                    <div v-else-if="item.file_type=='mp4'" class="result__box">
                        <video muted controls :src="item.path_url" style="width: 100%; height: 100%; object-fit: contain;"></video>
                        <div class="result__utils">
                            <span class="download__img" @click="share_result(item)">分享</span>
                        </div>
                    </div>

                    <div v-else-if="item.file_type=='mp3'" class="result__box">
                        <audio :src="item.path_url" controls style="width: 100%; object-fit: contain;"></audio>

                    </div>
                </div>

            </div>

        </div>

        <div class="page__right">
            <div>
                <div>名称：</div>
                <div>{{ data_obj.menu_name }}</div>
            </div>
            <div>
                <div>时间：</div>
                <div>{{ data_obj.create_time }}</div>
            </div>

            <div>
                <div>任务ID：</div>
                <div>{{ data_obj.task_uuid }}</div>
            </div>

            <div>
                <div>状态：</div>
                <div :style="{'color': state_dict[data_obj.state][1]}">{{ state_dict[data_obj.state][0] }}</div>
            </div>

            <div class="user__input">
                <div>用户输入：</div>
                    <div v-for="item, index in user_input.user_data" :key="index" class="user__data">
                        <div v-if="item.type=='image'">
                            <div>{{ item.name }}：</div>
                            <el-image
                            style="width: 100%; height: 100%; object-fit: contain;"
                            :src="item.fieldValue"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="[item.fieldValue]"
                            fit="contain"
                            :initial-index="4"
                            />
                        </div>

                        <div v-else-if="item.type=='text'">
                            <div>{{ item.name }}：</div>
                            <div>{{ item.fieldValue }}</div>
                        </div>

                        <div v-else-if="item.type=='mp4'">
                            <div>{{ item.name }}：</div>
                            <div><video muted controls :src="item.fieldValue" style="width: 100%; height: 100%; object-fit: contain;"></video></div>
                        </div>

                        <div v-else-if="item.type=='mp3'">
                            <div>{{ item.name }}：</div>
                            <div><audio :src="item.fieldValue" controls style="width: 100%; object-fit: contain;"></audio></div>
                        </div>
                    </div>
            </div>
        </div>

        <!-- <el-image
            style="width: 100%; height: 100%; object-fit: contain;"
            :src="data_obj.image"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[data_obj.image]"
            fit="contain"
            :initial-index="4"
            /> -->
    </div>


</el-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'

import { generateShare } from '@/api/homeApi.js'
import MessageBox from '@/utils/MessageBox'

const props = defineProps(['visible', "title", "instance"])
const emit = defineEmits(['cancel', 'confirm'])
const user_input = ref({});
const dialogVisible = ref(props.visible)

const state_dict = ref({
    '1': ['排队中', '#bcb23e'],
    '2': ['生成中', '#4c76e8'],
    '3': ['已完成', '#33de11'],
    '4': ['已取消', '#6c7070'],
    '-1': ['失败', '#ff0000'],
})
watch(() => props.visible, (value) => {
    if (value){
        dialogVisible.value = true
    }else{
        emit('cancel')
        dialogVisible.value = false
    }
    // value && (dialogVisible.value = true)
})

const data_obj = ref(props.instance)
watchEffect(() => {
    data_obj.value = props.instance
    // console.log(data_obj.value)
    try{
        if(data_obj.value.params){
            user_input.value = JSON.parse(data_obj.value.params)
        }else{
            user_input.value = {'user_date': []}
        }
        // console.log(user_input.value)
        
    }catch{
        user_input.value = {'user_date': []}
    }
})

// const clickImage = ()=> {
//         console.log('1111')
//       nextTick(() => {
//         let wrapper = document.getElementsByClassName('el-image-viewer__actions__inner')
//         console.log(wrapper)
//         // 添加下载图片按钮
//         let downImg = document.createElement('i');
//         downImg.setAttribute('class', 'el-icon-download');
//         // downloadBtn.addEventListener('click', cusClickHandler())
//         wrapper[0].appendChild(downImg)

        
//       })
//     }

// const cusClickHandler = ()=> {
//       const imgUrl = document.getElementsByClassName('el-image-viewer__img')[0].src
//     //   console.log(imgUrl)
//       const parts = imgUrl.split('/')
//       const lastPart = parts.pop()
//       const link = document.createElement('a')
//       fetch(imgUrl)
//         .then((res) => {
//           return res.blob()
//         })
//         .then((blob) => {
//           const blobUrl = URL.createObjectURL(blob)
//           link.href = blobUrl
//           link.download = lastPart
//           link.click()
//         })
//       link.href = imgUrl
//       link.download = lastPart
//       // })
//     }

const download__img = (imgUrl)=>{
    const timestamp = new Date().getTime();
    const link = document.createElement('a')
    var lastPart = timestamp+ '.png'
    fetch(imgUrl)
    .then((res) => {
        return res.blob()
    })
    .then((blob) => {
        const blobUrl = URL.createObjectURL(blob)
        link.href = blobUrl
        link.download = lastPart
        link.click()
    })
    link.href = imgUrl
    link.download = lastPart
      // })
}

// 分享结果
const share_result = async (item)=>{

    var req_data = {
        result_id: item.id,
    }
    var res = await generateShare(req_data)
    if(res.code == 1){
        MessageBox.success('分享成功')
    }   

}



onMounted(()=>{
    
})


function cancel(){
    emit('cancel')
    dialogVisible.value = false
}


onMounted(()=>{
    
})

</script>

<style lang="scss" scoped>

.page__all{
    height: 500px; 
    width: 100%;
    display: flex;

    .page__left{
        height: 100%; 
        width: calc(100% - 200px);
        min-width: 400px;
        border-right: 1px solid var(--wchime-color-border);
        .title{
            height: 20px;
            text-align: left;
        }
        .generate__result{
            padding: 20px;
            width: 100%;
            height: calc(100% - 20px);
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;

            .result__data{
                width: 100%;
                .image__box{
                    width: 100%;
                    overflow: hidden;

                }
            }
        }
    }
    .page__right{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        height: 100%; 
        width: 220px;
        min-width: 200px;
        // border: 1px solid red;
        overflow-y: auto;
        div{
            text-align: left;
        }
        .user__input{
            border-top: 1px solid var(--wchime-color-border);
            padding-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            .user__data{
                padding-left: 10px;
            }
        }

    }
    .page__right::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
    .page__right:hover::-webkit-scrollbar-thumb {
        background-color: #888;
    }
    .generate__result::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
    .generate__result:hover::-webkit-scrollbar-thumb {
        background-color: #888;
    }

}
.result__box{
    cursor: pointer;
    position: relative;
    .result__utils{
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex;
        gap: 10px;
        
        .download__img{
            color: #ecd015;
        }
        .download__img:hover{
            color: #1ea9f4;
        }
    }
    
}

</style>




<style lang="scss">
.record__right__dialog{
    min-width: 620px;
}

</style>








